<template>
    <div class="rightData home-margin-bottom">
        <div>
            <Row :gutter="16">
                <Col span="12">
                    <div class="cardData home-card cardOne">
                        <Row :gutter="16">
                            <Col span="12">
                                <div class="home-iconCon iconCon">
                                    <i class="ivu-icon iconOne ivu-icon-person-stalker"></i>
                                </div>
                            </Col>
                            <Col span="12">
                                <p class="data">
                                    <CountTo v-if="con.total_num" :countStyle="{ fontSize: '30px',color: 'rgb(45, 140, 240)',fontWeight:'600'}" :endVal="parseFloat(con.total_num)"></CountTo>
                                </p>
                                <p class="data-one home-font-two notwrap">会员总量</p>
                            </Col>
                        </Row>
                    </div>
                </Col>
                <Col span="12">
                    <div class="cardData home-card cardTwo">
                        <Row :gutter="16">
                            <Col span="12">
                                <div class="home-iconCon iconCon">
                                    <i class="ivu-icon iconTwo ivu-icon-android-person-add"></i>
                                </div>
                            </Col>
                            <Col span="12">
                                <p class="data">
                                    <CountTo v-if="con.today_num" :countStyle="{ fontSize: '30px',color: 'rgb(100, 213, 114)',fontWeight:'600'}" :endVal="parseFloat(con.today_num)"></CountTo>
                                </p>
                                <p class="data-one home-font-two notwrap">今日新增会员</p>
                            </Col>
                        </Row>
                    </div>
                </Col>
                <Col span="12">
                    <div class="cardData home-card marg cardThree">
                        <Row :gutter="16">
                            <Col span="12">
                                <div class="home-iconCon iconCon">
                                    <i class="ivu-icon iconThree ivu-icon-ribbon-a"></i>
                                </div>
                            </Col>
                            <Col span="12">
                                <p class="data">
                                    <CountTo v-if="con.month_num" :countStyle="{ fontSize: '30px',color: 'rgb(255, 213, 114)',fontWeight:'600'}" :endVal="parseFloat(con.month_num)"></CountTo>
                                </p>
                                <p class="data-one home-font-two notwrap">本月新增会员</p>
                            </Col>
                        </Row>
                    </div>
                </Col>
                <!--<Col span="12">-->
                    <!--<div class="cardData home-card marg cardFour">-->
                        <!--<Row :gutter="16">-->
                            <!--<Col span="12">-->
                                <!--<div class="home-iconCon iconCon">-->
                                    <!--<i class="ivu-icon iconFour ivu-icon-android-person-add"></i>-->
                                <!--</div>-->
                            <!--</Col>-->
                            <!--<Col span="12">-->
                                <!--<p class="data">-->
                                    <!--<CountTo v-if="con.month_num" :countStyle="{ fontSize: '30px',color: 'rgb(242, 94, 67)',fontWeight:'600'}" :endVal="parseFloat(con.month_num)"></CountTo>-->
                                <!--</p>-->
                                <!--<p class="data-one home-font-two notwrap">今日新增金牌会员</p>-->
                            <!--</Col>-->
                        <!--</Row>-->
                    <!--</div>-->
                <!--</Col>-->
            </Row>
        </div>
    </div>
</template>
<script>
    import CountTo from '../../../my-components/count-to/CountTo.vue';
    export default {
        data(){
            return{

            }
        },
        props:{
            con:{
                type: Object,
                default: ()=> {
                    return {}
                }
            }
        },
        components:{ CountTo },
        methods:{

        }
    }
</script>
<style scoped>
    .rightData{height: 220px;}
    .marg{margin-top: 16px;}
    .cardData{height: 102px;padding: 10px;cursor: pointer}
    .iconCon{transition: all 0.5s}
    .data{padding-top: 5px;}
    .data,.data-one{text-align: center}
    .ivu-icon{font-size: 48px;text-align: center;display: block;padding-top: 18px;transition: all 0.5s;}
    .iconOne{color: rgb(45, 140, 240)}
    .iconTwo{color: rgb(100, 213, 114)}
    .iconThree{color: rgb(255, 213, 114)}
    .iconFour{color: rgb(242, 94, 67)}
    .cardOne:hover .iconCon{background: rgb(45, 140, 240)}
    .cardTwo:hover .iconCon{background: rgb(100, 213, 114)}
    .cardThree:hover .iconCon{background: rgb(255, 213, 114)}
    .cardFour:hover .iconCon{background: rgb(242, 94, 67)}
    .cardData:hover .ivu-icon{color: #ffffff;}
</style>
